<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title }}</h2>
      <h2>msg == {{msg }}</h2>
      <m-head></m-head>
      <hr />
      <Home id="2000" :msg="msg" :html="html">
        <div>
          <h2>Are you OK</h2>
          <h2>Vue api 基本搞定了</h2>
        </div>
      </Home>
      <Home id="2000" :msg="msg" :html="html">
        <template v-slot:banner>
          <div>
            <h2>Banner - Banner 轮播图 1</h2>
            <h2>Banner - Banner 轮播图 2</h2>
          </div>
        </template>
      </Home>
      <Home id="2000" :msg="msg" :html="html">
        <template #banner>
          <div>
            <h2>Banner - Banner 轮播图 4</h2>
            <h2>Banner - Banner 轮播图 5</h2>
          </div>
        </template>
      </Home>
      <hr />
      <myuser></myuser>
      <myuser>
        <template v-slot:default="scope">
          <h2>{{scope.info.age}}</h2>
        </template>
      </myuser>
      <myuser>
        <template #default="scope">
          <h2>{{scope.info.word}}</h2>
        </template>
      </myuser>
    </div>

    <template id="home">
      <div>
        <h2>Home - Home - Home</h2>
        <h2>id == {{id}} --{{msg}}</h2>
        <div v-html="html"></div>
        <hr />
        <div class="slot">
          <slot
            >这是组件的插槽(slot) 如果没有父组件的内容分发, 这里就默认显示</slot
          >
        </div>
        <div class="slot">
          <slot name="banner">这里可能呈现具名插槽的内容 (banner )</slot>
        </div>
      </div>
    </template>
    <template id="myuser">
      <div>
        <h2>用户信息 - myuser - 1</h2>
        <h2>显示用户信息</h2>
        <div>
          <slot :info="info"> {{info.username}} </slot>
        </div>
        <hr />
      </div>
    </template>
    <script>
      //全局注册
      const bus = new Vue();
      Vue.component("mHead", {
        template: "<header>Head - Head - wh2116daydayup </header>",
      });
      Vue.component("Home", {
        template: "#home",
        props: ["id", "msg", "html"],
      });
      Vue.component("myuser", {
        template: "#myuser",
        data() {
          return {
            info: {
              username: "zzs",
              age: 22,
              word: "daydayup",
            },
          };
        },
      });
      const vm = new Vue({
        data: {
          title: "Vue 组件插槽 slot",
          msg: "wh2116-daydayup",
          html: "<h2> 4.1节日快乐</h2>",
        },
        mouted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
  </body>
</html>
